<template>

  <div>
    <el-container>
      <div>
        <NavList msg="导航菜单" @getMsg="handermsg" :isCollapse="isCollapse"></NavList>
      </div>
      <el-container>
        <el-header>
          <i class="el-icon-d-arrow-left" @click="isCollapse=!isCollapse"></i>
          <a href="javascript:;" style="float:right;margin:0px 30px;" @click="cancel">注销</a>
          <span style="float:right">欢迎您:{{username}}</span>
        </el-header>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>

</template>

<script>

//1、导入 需要的子组件
import NavList from '@/components/layout/NavList'


export default {
  components:{//组件与标签的映射
    NavList
  },
  data(){
    return {
      isCollapse:false,
      username:localStorage.getItem("username"),
    }
  },
  methods:{
    // 接收子组件传递的数据
    handermsg(data){
      alert(data)
    },
    cancel(){
      localStorage.clear()
    }
  },
  created(){

  }
}
</script>

<style>

.el-aside{
  /* height:800px; */
  background-color:khaki;
}
.el-header{
  background-color: dodgerblue;
  line-height: 60px;

}
body{
  margin:0px;
}


</style>
